<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优惠券</title>
    <script src="./../utils/flexible.js"></script>
    <script src="./../utils/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="./../assets/fonts/iconfont.css">
    <link rel="stylesheet" href="./../css/public.css">
    <link rel="stylesheet" href="./../css/couponproduct.css">
    <script src="./../utils/tools.js"></script>
</head>

<body>
    <!-- 头部 -->
    <header id="header" class="clearfix">
        <span class="iconfont icon-31fanhui1"></span>
        <p>优惠券</p>
        <a class="download" href="#">
            <img src="./../assets/images/header_app.png" alt="">
        </a>
    </header>

    <!-- 提示 -->
    <div id="propmpt">
        --点餐前出示手机中的优惠券，即可享受优惠--
    </div>

    <!-- 轮播图 -->
    <div id="carousel">
        <a href="#" class="left arrow">&lt;</a>
        <div class="marskSm">
            <i>X</i>
            <ul class="infom">
                <li><img src="http://d3.5ikfc.com/static/thumbs/1016/kfc-5ikfc-108_pc27.jpg"></li>
                <li><img src="http://d3.5ikfc.com/static/thumbs/1016/kfc-5ikfc-108_pc28.jpg"></li>
                <li><img src="http://d3.5ikfc.com/static/thumbs/1016/kfc-5ikfc-108_pc15.jpg"></li>
                <li><img src="http://d3.5ikfc.com/static/thumbs/1016/kfc-5ikfc-108_pc22.jpg"></li>
                <li><img src="http://d3.5ikfc.com/static/thumbs/1016/kfc-5ikfc-108_pc14.jpg"></li>
                <li><img src="http://d3.5ikfc.com/static/thumbs/1016/kfc-5ikfc-108_pc11.jpg"></li>
                <li><img src="http://d3.5ikfc.com/static/thumbs/1016/kfc-5ikfc-108_pc21.jpg"></li>
                <li><img src="http://d3.5ikfc.com/static/thumbs/1016/kfc-5ikfc-108_pc17.jpg"></li>
            </ul>
        </div>
        <a href="#" class="right arrow">&gt;</a>
    </div>

    <!-- 商品 -->
    <section id="product">
        <ul class="info">
            <!-- <li data-index="0">
                <a href="javascript:;" class="clearfix">
                    <div class="img fl">
                        <img src="http://d3.5ikfc.com/static/thumbs/1016/kfc-5ikfc-108_pc27.jpg"
                            alt=" 两人小食组 新奥尔良烤翅2块+薯条(中)+黄金鸡块5块+劲爆鸡米花(小) 2016年10月凭肯德基优惠券">
                    </div>
                    <div class="infoR">
                        <div class="title">
                            <h4>C27 两人小食组 新奥尔良烤翅2块+薯条(中)+黄金鸡块5块+劲爆鸡米花(小) 2016年10月凭肯德基优惠券</h4>
                        </div>
                        <div class="other">
                            <h4 class="price">
                                ￥ 28
                            </h4>
                            <div class="mall fl">有效期至10月31日</div>
                        </div>

                    </div>
                </a>
            </li> -->
        </ul>
    </section>
    <!-- footer -->
    <footer>
        <div class="more">
            <a href="#">更多优惠信息>></a>
        </div>
        <!-- <div class="rank">
            <h3>品牌排行</h3>
            <a href="#">
                <img src="./../assets/images/more.png" alt="">
            </a>
        </div> -->
        <div class="login">
            <div class="row">
                <a href="#">登录</a>
                <a href="#">注册</a>
                <a href="#">返回顶部</a>
            </div>
            <div class="container">
                <p>
                    <a href="#">手机app下载</a>

                    <a href="#">万峰智慧商城手机版</a>
                    --掌上比价平台
                </p>
                <p>chst.vip:8081/crm</p>
            </div>
        </div>
    </footer>

</body>

</html>
<script>
    //获取dom元素
    let back = document.querySelector(".icon-31fanhui1")
    let info = document.querySelector(".info")
    let infom = document.querySelector(".infom")

    //点击返回
    back.onclick = () => {
        location.href = "./../pages/coupon.html"
    }

    // 获取优惠券数据 
    let couponid = getQueryString("couponid")

    req(couponid)

    /* 获取优惠券 */
    function req(couponid) {
        fetch("http://chst.vip:1234/api/getcouponproduct?couponid=" + couponid)
            .then(response => response.json())
            .then(res => {
                let domStr = ''
                res.result.forEach(item => {
                    domStr += `
                    <li data-index=${item.couponProductId}>
                        <a href="javascript:;" class="clearfix">
                            <div class="img fl">
                               ${item.couponProductImg}
                            </div>
                            <div class="infoR">
                                <div class="title">
                                    <h4>${item.couponProductName}</h4>
                                </div>
                                <div class="other">
                                    <h4 class="price">
                                       ${item.couponProductPrice}
                                    </h4>
                                    <div class="mall fl">有效期至10月31日</div>
                                </div>

                            </div>
                        </a>
                    </li>`
                })
                info.innerHTML = domStr
                carousel()
            })
    }





    /* 轮播图 */
    function carousel() {
        let lis = $('.infom>li').length
        let onePicWidth = 200;
        let picIndex = 0
        let infom = document.querySelector('.infom')
        //给列表中的li注册点击事件
        $('#product li').click(function () {
            // console.log($('#product li'))
            // console.log($(this).index());
            picIndex = $(this).index()

            infom.style.left = `-${picIndex * onePicWidth}px`
            $('#carousel').css({
                transform: 'translateY(1000px)',
                transition: 'all 0.7s ease-in-out 0s'
            })

        })
        /* 箭头点击事件 */
        $('#carousel .arrow').click(function () {
            console.log(picIndex);
            if ($(this).index() == 0) {
                console.log('点击左键');
                picIndex--
                if (picIndex < 0) {
                    picIndex = 0
                    // alert('已经是第一张了')
                }
            } else {
                console.log('点击右键');
                picIndex++
                if (picIndex === lis) {
                    picIndex = lis - 1
                    // alert('最后一张了')
                }
            }
            console.log(-picIndex);
            animate(infom, -(picIndex * onePicWidth))
        })

        /* 关闭按钮事件 */
        $('.marskSm i').click(function () {
            $('#carousel').css({
                transform: 'translateY(-1000px)',
                transition: 'all 0.7s ease-in-out 0s'
            })
        })
    }


</script>